<template>
  <div class="dropdown">
    <div class="form-control">
      <div class="input-group">
        <input
          type="text"
          tabindex="0"
          placeholder="Search…"
          class="input input-bordered"
          v-model="searchStore.searchText"
          @input="searchInput"
          @focus="searchInput"
          @keydown.enter="goSearch"
        />
        <button @click="goSearch" class="btn btn-square">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-6 w-6"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
            />
          </svg>
        </button>
      </div>
    </div>

    <div
      tabindex="0"
      class="dropdown-content bg-base-200 text-base-content rounded-t-box rounded-b-box top-px max-h-96 h-[70vh] w-52 overflow-auto shadow-2xl mt-16"
    >
      <div v-if="searchStore.isHot">
        <div class="pt-2 pb-1.5 px-2.5">热门搜索</div>
        <div>
          <div
            v-for="(item, index) in searchStore.searchHotData"
            :key="item.searchWord"
            class="py-2.5 px-2.5 hover:text-green-600 cursor-pointer flex justify-between items-center text-xs"
            @click="clickSearch(item.searchWord)"
          >
            <div>
              <span class="mr-1">{{ index + 1 }}.</span>
              <span>{{ item.searchWord }}</span>
            </div>
            <div class="text-red-300 text-xs">
              {{ useNumberFormat(item.score) }}
            </div>
          </div>
        </div>
      </div>
      <v-search-suggest v-else></v-search-suggest>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { useSearchStore } from "../../store/search";
  import { useSearchDetail } from "../../store/searchDetail";
  import { useSongPlayStore } from "../../store/songPlay";
  import vSearchSuggest from "./searchSuggest.vue";
  import { Message, Search } from "@element-plus/icons-vue";
  import { onMounted, ref, toRefs } from "vue";
  import { useRouter } from "vue-router";
  import { useNumberFormat } from "../../utils/number";
  import { ElMessage } from "element-plus";
  const searchStore = useSearchStore();
  const router = useRouter();
  //input值发生改变时触发
  const searchInput = () => {
    if (!searchStore.searchText) return;
    searchStore.actionSearchSuggest(searchStore.searchText);
  };
  //跳转至搜索页
  const goSearch = () => {
    if (!searchStore.searchText) {
      return ElMessage("请输入内容后搜索");
    }
    actionSearchDetail.value(searchStore.searchText,0,true);
    changeData.value(searchDetailList.value);

    router.push("/searchDetail?keywords=" + searchStore.searchText);
  };
  //点击推荐
  const clickSearch = (value: string) => {
    searchStore.searchText = value;
    goSearch();
  };
  onMounted(() => {
    searchStore.actionSearchHot();
  });
  const { actionSearchDetail, searchDetailList } = toRefs(useSearchDetail());
  const { changeData } = toRefs(useSongPlayStore());
</script>

<style scoped lang="scss"></style>
